<template>
  <div class="info">
    <el-card class="custom-card" shadow="always">
      <el-form>
        <div class="username-link" style="text-align: center;"><a>{{ user.username }}</a></div>

        <div v-if="user.status===1">
          <el-descriptions>
            <el-descriptions-item label="姓名:" style="width: 400px;">{{ user.realname }}</el-descriptions-item>
            <el-descriptions-item label="性别:" style="width: 400px;">{{ user.sex }}</el-descriptions-item>
            <div>
              <div>
                <el-descriptions-item label="电话:" style="width: 400px;">{{ user.phone }}</el-descriptions-item>
                <el-descriptions-item label="邮箱:" style="width: 400px;">{{ user.email }}</el-descriptions-item>
              </div>
            </div>
            <el-descriptions-item label="余额:">{{ user.money }}</el-descriptions-item>
          </el-descriptions>
          <div class="status">
            <el-icon class="success"><Select/></el-icon>
            <div>
              <el-button type="primary" @click="updateUserShow=true;">修改信息</el-button>
            </div>
            <div>
              <el-button class="attestation" type="success">已认证</el-button>
            </div>
          </div>
        </div>

        <div v-else>
          <el-descriptions>
            <el-descriptions-item label="姓名:" style="width: 400px;">{{ user.realname }}</el-descriptions-item>
            <el-descriptions-item label="性别:" style="width: 400px;">{{ user.sex }}</el-descriptions-item>
            <div>
              <div>
                <el-descriptions-item label="电话:" style="width: 400px;">{{ user.phone }}</el-descriptions-item>
                <el-descriptions-item label="邮箱:" style="width: 400px;">{{ user.email }}</el-descriptions-item>
              </div>
            </div>
            <el-descriptions-item label="余额:">{{ user.money }}</el-descriptions-item>
          </el-descriptions>
          <div class="status">
            <el-icon class="danger">
              <CloseBold/>
            </el-icon>
            <div>
              <el-button class="attestation" type="primary" @click="attestationShow=true;">认证</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>


  <!-- 身份认证对话框开始 -->
  <el-dialog v-model="attestationShow" title="身份认证" width="500">
    <el-form>
      <el-form-item label="姓名" label-width="20%">
        <el-input v-model="userU.realname" placeholder="请输入姓名" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="userU.sex">
          <el-radio value="男" size="large">男</el-radio>
          <el-radio value="女" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号" label-width="20%">
        <el-input v-model="userU.idCard" placeholder="请输入身份证号" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="userU.phone" placeholder="请输入电话" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="userU.email" placeholder="请输入邮箱" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="attestationShow = false">取消</el-button>
        <el-button type="primary" @click="updateStatus">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--身份认证对话框结束-->

  <!-- 修改信息对话框开始 -->
  <el-dialog v-model="updateUserShow" title="修改信息" width="500">
    <el-form>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="uUser.phone" placeholder="请输入电话" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="uUser.email" placeholder="请输入邮箱" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateUserShow = false">取消</el-button>
        <el-button type="primary" @click="updateUser">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改信息对话框结束-->



</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {CloseBold} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

//认证对话框
const attestationShow = ref(false);

//修改信息对话框
const updateUserShow = ref(false);

//用户信息
const user = ref({
  id: null,
  username: null,
  password: null,
  realname: "",
  sex: "",
  idCard: "",
  phone: null,
  email: null,
  money: null,
  status: null,
});

//认证信息
const userU = ref({
  id: null,
  username: null,
  password: null,
  realname: "",
  sex: "",
  idCard: "",
  phone: null,
  email: null,
  money: null,
  status: null,
});

//修改信息
const uUser = ref({
  id: null,
  username: null,
  password: null,
  realname: null,
  sex: null,
  idCard: null,
  phone: null,
  email: null,
  money: null,
  status: null,
});

//修改用户
function updateStatus() {
  userApi.updateU(userU.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          attestationShow.value = false;
          userU.value = {
            id: null,
            username: null,
            password: null,
            realname: "",
            sex: "女",
            idCart: null,
            phone: null,
            email: null,
            money: null,
            status: null,
          };
          selectByUsername();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//修改信息
function updateUser() {
  userApi.uUpdate(uUser.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          updateUserShow.value=false;
          uUser.value={
            id: null,
            username: null,
            password: null,
            realname: null,
            sex: null,
            idCard: null,
            phone: null,
            email: null,
            money: null,
            status: null,
          };
          selectByUsername();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//查询用户
function selectByUsername() {
  userApi.selectId().then((resp) => {
    user.value = resp.data;
  });
}

selectByUsername();
</script>

<style scoped>
.info {
  padding: 20px;
  background-color: #f5f5f5;
}

.info .status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info .custom-card .status .attestation {
  margin-right: 20px;
}

.success.el-icon {
  font-size: 50px;
  color: #13ce66;
}

.danger.el-icon {
  font-size: 50px;
  color: #ff4949;
}

.custom-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.username-link {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.status-info {
  font-size: 14px;
  color: #666;
}

.auth-button {
  margin-top: 10px;
}

.info .custom-card .status .attestation {
  text-align: left;

}
</style>